<template>
  <div>
    <h2>拍照示例</h2>
    <button @click="takePicture">拍照</button>
    <div v-if="imageData">
      <h3>预览：</h3>
      <img :src="imageData" alt="拍摄的照片" style="max-width: 300px;height: 800px"/>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import {loadingCamera} from "@/composable/loadingCamera.js";

const imageData = ref(null)

async function takePicture() {
  try {
    const imageDataUrl = await loadingCamera();

    console.log('拍照返回数据:', imageDataUrl);

    if (imageDataUrl && imageDataUrl.startsWith('data:image/')) {
      imageData.value = imageDataUrl; // ✅ 合法 Base64 数据
    } else {
      // ❌ 数据不合法，添加 fallback 提示
      alert('图片数据无效');
    }

  } catch (err) {
    console.error('拍照失败:', err);
    alert('拍照失败，请重试');
  }
}

</script>
